<template>
	<view style="padding: 20upx;font-size: 30upx;">
		<view style="background: #FFFFFF;">
			<view class="head">订单号：{{orderDetail.orderId}}</view>
			<view v-for="(item,index) in orderDetail.orderProductItems" :key='index'>
				<view class="order">
					<image style="width: 180upx;height: 180upx;" :src="item.imageUrl"></image>
					<view style="margin-left: 20upx;flex: 1;">
						<view class="name">{{item.name}}</view>
						<view class="name">{{item.spesDesc}}</view>
						<view style="display: flex;justify-content: space-between;">
							<text>￥{{item.price}}</text>
							<text>x{{item.nums}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="message">
			<view style="color: #D7000F">
				<text style='color: #000;'>订单状态：</text>
				<text v-if="orderDetail.status==3">已取消</text>
				<text v-else-if="orderDetail.status==1&&orderDetail.payStatus==1">待付款</text>
				<text v-else-if="orderDetail.status==1&&orderDetail.payStatus==2&&orderDetail.shipStatus==1&&orderDetail.aftersaleStatus === 0">待发货</text>
				<text v-else-if="orderDetail.status==1&&orderDetail.payStatus==2&&orderDetail.shipStatus==3&&orderDetail.aftersaleStatus === 0">待收货</text>
				<text v-else-if="orderDetail.aftersaleStatus === 1 || orderDetail.aftersaleStatus === 2">正在售后</text>
				<text v-else-if="orderDetail.aftersaleStatus === 3">售后完成</text>
				<text v-if="orderDetail.status==2 && orderDetail.aftersaleStatus === 0">已完成</text>
			</view>
			<view>下单日期：{{orderDetail.paymentTime}}</view>
			<view v-if='orderDetail.payStatus==2'>
				<text>支付方式：</text>
				<text v-if="orderDetail.paymentCode==='wxpay'">微信支付</text>
				<text v-if="orderDetail.paymentCode==='alipay'">支付宝支付</text>
				<text v-if="orderDetail.paymentCode==='balance'">余额支付</text>
			</view>
			<view v-if='orderDetail.payStatus==2'>支付金额：{{orderDetail.payed}} 元</view>
		</view>

		<view class="message">
			<view>收件人：{{orderDetail.shipName}}</view>
			<view>联系电话：{{orderDetail.shipMobile}}</view>
			<view>收货地址：{{orderDetail.shipProvince}}{{orderDetail.shipCity}}{{orderDetail.shipArea}}{{orderDetail.shipAddress}}</view>
			<view>留言:{{orderDetail.memo}}</view>
		</view>
		<view v-if="logistics" class="message">
			<text>物流信息：</text>
			<view v-for="(item,index) in logistics" style="display: flex;font-size: 30upx;line-height: 50upx;">
				<text style="font-weight: bold;font-size: 40upx;margin-right: 20upx;" :class="index === logistics.length-1?'red':'gray'">·</text>
				<!-- <view style="width: 1px;height: 30px;background: #E6E6E6;position: relative;left:-24px;top: 13px;" v-if="index !==logistics.length-1"></view> -->
				<text :class="index === logistics.length-1?'red':''" style="margin-right: 20upx;font-size: 26upx;">{{item.acceptTime}}</text>
				<text :class="index === logistics.length-1?'red':''" style="flex: 1;">{{item.acceptStation}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				refund: '',
				userId: '',
				orderId: '',
				type: 1,
				reason: '',
				nums: '',
				linkman: '',
				tel: '',
				address: '',
				price: '',
				confirm: '',
				name: '',
				id: '',
				payed: '',
				images: [],
				logistics: [],
				orderProductItems: [],
				orderDetail: [],
				spesDesc: '',
				orderItemId: '',
				imageUrl: '',
				memo: '',
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
		},
		onShow() {
			this.getLogistics()
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				try {
					const params = {
						orderId: this.orderId
					}
					post('mobileapi/mobile/order/getOrderDetail', params).then(res => {
						this.orderDetail = res.orderDetail
					})
				} catch (e) {
					//TODO handle the exception
				}
			},
			getLogistics() {
				try {
					const params = {
						orderId: this.orderId
					}
					post('mobileapi/kdnQuery/shipQuery', params).then(res => {
						if (res.data) {
							this.logistics = res.data.traces
						} else {
							this.logistics = []
						}
					})
				} catch (e) {}
			}
		}
	}
</script>
<style>
	.head {
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx #ececec solid;
		padding: 16upx 20upx;
	}

	.order {
		border-bottom: 2upx solid #E6E6E6;
		display: flex;
		padding: 20upx;
		border-bottom: 2upx solid #ECECEC;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 70upx;
		line-height: 35upx;
	}

	.operation {
		font-size: 30upx;
		margin: 20upx;
	}

	.message {
		margin-top: 20upx;
		background: #ffffff;
		padding: 20upx;
	}
	
	.red{
    color:#D7000F;
  }
  .gray{
    color: #E6E6E6;
  }
</style>
